<template>
	<el-drawer v-model="visible" :title="`${isCreate ? '添加' : '修改'}事件`" :class="$style['modify-drawer']" size="50%"
		:close-on-click-modal="false" :close-on-press-escape="false" @close="onCancel">
		<div :class="$style['modify-wrapper']">
			<el-form ref="refForm" :model="formModal" label-width="100" :rules="rules">
				<el-form-item label="事件类型" prop="event">
					<el-select v-model="formModal.event" placeholder="事件类型" clearable @change="handleChangeEvent">
						<template :key="index" v-for="(opt, index) in eventOptions">
							<el-option :label="opt.name" :value="opt.category" />
						</template>
					</el-select>
				</el-form-item>

				<el-form-item label="事件内容" prop="content">
					<el-input v-model="formModal.content" class="w-220" placeholder="请输入事件内容" />
				</el-form-item>

				<template v-if="currentEvent == 'judgment'">
					<el-form-item label="通过路线" prop="valid">
						<el-select v-model="formModal.event" placeholder="事件类型" clearable @change="handleChangeEvent">
							<template :key="index" v-for="(opt, index) in eventOptions">
								<el-option :label="opt.name" :value="opt.category" />
							</template>
						</el-select>
					</el-form-item>

					<el-form-item label="失败路线" prop="invalid">
						<el-select v-model="formModal.event" placeholder="事件类型" clearable @change="handleChangeEvent">
							<template :key="index" v-for="(opt, index) in eventOptions">
								<el-option :label="opt.name" :value="opt.category" />
							</template>
						</el-select>
					</el-form-item>
				</template>
			</el-form>

			<div :class="$style['button-wrapper']">
				<el-button @click="onCancel">取消</el-button>
				<el-button type="primary" :loading="loading" @click="onSubmit">保存</el-button>
			</div>
		</div>
	</el-drawer>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useInject } from '@/utils/workflow/workflow.event'
import { enumEventModule } from '@/utils/emunEvent'
const { emitEvent } = useInject()
const refForm = ref(null)
const visible = ref(false)
const loading = ref(false)
const isCreate = ref(true)
const formModal = ref({})
let currentType
const currentEvent = ref({})
const rules = reactive({
	event: { required: true, message: '请选择事件', trigger: 'blur' },
	content: { required: true, message: '请输入事件内容', trigger: 'blur' }
})

const eventOptions = [
	{ category: enumEventModule.event, name: '事件', icon: '&#xe625;' },
	{ category: enumEventModule.end, name: '标记结束', icon: '&#xe622;' },
	{ category: enumEventModule.judgment, name: '判断', icon: '&#xe629;' }
]

const handleChangeEvent = (value) => {
	console.log('🚀 ~ handleChangeEvent ~ value:', value)
	currentEvent.value = value
}

const onCancel = () => {
	visible.value = false
	loading.value = false
}

const onSubmit = () => {
	if (!refForm.value) {
		return
	}

	refForm.value.validate(valid => {
		if (!valid || !enumEventModule[currentType]) {
			return
		}

		const currentEvent = eventOptions.find((opt) => opt.category === formModal.value.event)

		emitEvent(enumEventModule[currentType], {
			node: formModal.value.node,
			category: currentEvent?.category,
			icon: currentEvent?.icon,
			title: currentEvent?.name,
			content: formModal.value.content,
			from: formModal.value.from,
			to: formModal.value.to,
		})

		ElMessage.success(isCreate.value ? '创建成功' : '更新成功')
		onCancel()
	})
}
const open = (data) => {
	console.table(data)
	currentType = data.type
	isCreate.value = !!data.isCreate
	visible.value = true
}
defineExpose({ open })
</script>

<style lang="scss" module>
.modify-drawer {
	@include defineEl('drawer__header') {
		margin-bottom: 0;
	}

	@include defineEl('drawer__body') {
		--el-drawer-padding-primary: 20px 20px 10px;
	}
}

.modify-wrapper {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.table-wrapper {
	flex: 1;
	height: 0;
}

.button-wrapper {
	display: flex;
	justify-content: right;
	align-items: center;
	padding-top: 10px;
}
</style>